/**
 * 轮播图插件
 * @param {String} （‘div’最大的盒模型类名） 
 */
 function Lbt(elm){

    this.elm = document.querySelector(elm)
    this.num = 1
    this.t = null

    this.init()
}
//init 函数里调用 设置
Lbt.prototype.init = function(){
    this.changeImg()
    this.syncQ()
    this.qOverOut()
}
//定时器切换图
Lbt.prototype.changeImg = function (){

    this.t = setInterval(() => {
        this.num++
        if (this.num == 6)this.num = 1
        let imgObj = this.elm.querySelector('img')
        imgObj.src = `./imgs/img${this.num}.jpg`

        this.syncQ()
    }, 1000);
}
//图片同步分页器
Lbt.prototype.syncQ = function (){

    let liObjs = this.elm.querySelectorAll('ul li')
   
    liObjs.forEach((item,index) => {
        item.className = ''
    })

    liObjs[this.num-1].className = 'active'
    
}
// 分页器移入移出
Lbt.prototype.qOverOut = function (){

    let liObjs = this.elm.querySelectorAll('ul li')

    liObjs.forEach((item,index) => {
        item.addEventListener('mouseover', ()=>{
            clearInterval(this.t)

            this.elm.querySelector('img').src = `./imgs/img${index+1}.jpg`
            this.num = index +1
            this.syncQ()
        })
        item.addEventListener('mouseout',()=>{
            this.changeImg()
        })
    })
}
export default Lbt;
